<template>
    <div id="map" class="mapC map"></div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
// import MapboxVector from 'ol/layer/MapboxVector'
// import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
// import XYZ from 'ol/source/XYZ'
// import MVT from 'ol/format/MVT'
// import VectorTileLayer from 'ol/layer/VectorTile'
// import VectorTileSource from 'ol/source/VectorTile'
import {Stroke, Style} from 'ol/style'
// import {Fill, Icon, Stroke, Style, Text} from 'ol/style'
import GeoJSON from 'ol/format/GeoJSON'
import Layer from 'ol/layer/Layer'
import Source from 'ol/source/Source'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'

import {fromLonLat, toLonLat} from 'ol/proj'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // 1
      // eslint-disable-next-line
      // const map = new Map({
      //   target: 'map',
      //   layers: [
      //     new MapboxVector({
      //       styleUrl: 'mapbox://styles/mapbox/light-v10',
      //       accessToken:
      //         'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'
      //       // window.keyData
      //     })
      //   ],
      //   view: new View({
      //     center: [0, 0],
      //     zoom: 2
      //   })
      // })

      // 2
      // const map = new Map({
      //   target: 'map',
      //   layers: [
      //     new TileLayer({
      //       source: new XYZ({
      //         url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoid2FuZ2hhaGExIiwiYSI6ImNqeHUycXF5ZDEweDQzYnBiOTcwZGoxMHAifQ.eCGuiA6erHJ7ew-Fkc7dRA'
      //       })
      //     })
      //   ],
      //   view: new View({
      //     center: [0, 0],
      //     zoom: 2
      //   })
      // })

      // 3

      // const map = new Map({
      //   layers: [
      //     new VectorTileLayer({
      //       declutter: true,
      //       source: new VectorTileSource({
      //         format: new MVT(),
      //         url:
      //         'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
      //         '{z}/{x}/{y}.vector.pbf?access_token=' +
      //         window.keyData
      //       })
      //       // style: window.createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
      //     })
      //   ],
      //   target: 'map',
      //   view: new View({
      //     center: [0, 0],
      //     zoom: 2
      //   })
      // })

      // 4
      let center = [-98.8, 37.9]
      const mbMap = new window.mapboxgl.Map({
        style: 'mapBoxUrl/maps/bright/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB',
        attributionControl: false,
        boxZoom: false,
        center: center,
        container: 'map',
        doubleClickZoom: false,
        dragPan: false,
        dragRotate: false,
        interactive: false,
        keyboard: false,
        pitchWithRotate: false,
        scrollZoom: false,
        touchZoomRotate: false
      })

      const mbLayer = new Layer({
        render: function (frameState) {
          const canvas = mbMap.getCanvas()
          const viewState = frameState.viewState

          const visible = mbLayer.getVisible()
          canvas.style.display = visible ? 'block' : 'none'

          const opacity = mbLayer.getOpacity()
          canvas.style.opacity = opacity

          // adjust view parameters in mapbox
          const rotation = viewState.rotation
          mbMap.jumpTo({
            center: toLonLat(viewState.center),
            zoom: viewState.zoom - 1,
            bearing: (-rotation * 180) / Math.PI,
            animate: false
          })

          // cancel the scheduled update & trigger synchronous redraw
          // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
          // NOTE: THIS MIGHT BREAK IF UPDATING THE MAPBOX VERSION
          if (mbMap._frame) {
            mbMap._frame.cancel()
            mbMap._frame = null
          }
          mbMap._render()

          return canvas
        },
        source: new Source({
          attributions: [
            '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a>',
            '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
          ]
        })
      })

      const style = new Style({
        stroke: new Stroke({
          color: '#319FD3',
          width: 2
        })
      })

      const vectorLayer = new VectorLayer({
        source: new VectorSource({
          url: 'zlocal/data/geojson/countries.geojson',
          format: new GeoJSON()
        }),
        style: style
      })
      // eslint-disable-next-line
      const map = new Map({
        target: 'map',
        view: new View({
          center: fromLonLat(center),
          zoom: 4
        }),
        layers: [mbLayer, vectorLayer]
      })
    }
  }
}
</script>

<style scoped>

</style>
